<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <base target="_blank">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/exam.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <Myheader></Myheader>
        <el-row class="c900" style="height: calc(100% - 90px); background-color: #eee; width:1200px">
            <el-col span="8" class="h100 flex" style="flex-direction: column;align-items: stretch; border-right: 1px #bbb solid">
                <h3 class="flex">
                    筛选题目
                    <el-button @click="location='question.html'" style="padding: 3px 0" type="text">题目管理</el-button>
                </h3>
                <el-form label-position="left">
                    <el-form-item label="题型:" label-width="80px">
                        <el-select @change="reQuery" v-model="questionWhere.type" placeholder="题型" style="width: 100%">
                            <el-option label="填空题" value="填空题"></el-option>
                            <el-option label="单选题" value="单选题"></el-option>
                            <el-option label="多选题" value="多选题"></el-option>
                            <el-option label="判断题" value="判断题"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程章节:" label-width="80px">
                        <el-select @change="reQuery" v-model="questionWhere.course" placeholder="课程章节" style="width: 100%">
                            <el-option label="Java" value="Java"></el-option>
                            <el-option label="HTML" value="html"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div id="qs" style="overflow-y: auto; flex-grow: 1;padding: 10px;margin-block: 10px">
                    <el-card v-infinite-scroll="queryNext" :infinite-scroll-delay="500">
                        <div v-for="(q,i) in questionPage.records" class="flex">
                            <div>
                                <el-tag>{{q.type}}</el-tag>
                                <span v-if="q.content.length>15">
                                    {{q.content.substring(0,15)}}...
                                </span>
                                <span v-else>
                                    {{q.content}}
                                </span>
                            </div>
                            <!--                            <el-checkbox v-model="selected" :value="q.id" @change="choose">选择</el-checkbox>-->
                            <span>
                                <input type="checkbox" :value="q.id" @change="choose($event,q)">选择
                            </span>

                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col span="16" class="h100 flex" style="flex-direction: column;align-items: stretch;padding-inline: 10px">
                <h3 class="flex">
                    考卷信息
                    <el-button @click="showEditor2=true" style="padding: 3px 10px" type="text">自动生成考卷</el-button>
                    <el-button @click="save" style="padding: 3px 10px" type="text">保存</el-button>
                </h3>
                <el-form :inline="true" label-position="left" style="flex:none;">
                    <el-form-item label="标题:" label-width="80px">
                        <el-input v-model="paper.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" label-width="80px">
                        <el-input v-model="paper.pwd" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-position="left" style="flex:none;">
                    <el-form-item label="总分:" label-width="80px">
                        <el-input v-model="paper.scoreTotal"></el-input>
                    </el-form-item>
                    <el-form-item label="时长:" label-width="80px">
                        <el-input v-model="paper.time" placeholder="请输入考试用时"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-position="left" style="flex:none;">
                    <el-form-item label="考试时间:" label-width="80px">
                        <el-date-picker v-model="paper.begin" type="datetime" placeholder="选择日期时间" style="width: 206px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="至:" label-width="80px">
                        <el-date-picker v-model="paper.end" type="datetime" placeholder="选择日期时间" style="width: 206px">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-position="left" style="flex:none;">
                    <el-form-item label="填空分值:" label-width="80px">
                        <el-input-number v-model="paper.scoreTk" controls-position="right" size="mini" :min="1" :max="10" @change="change" style="width: 80px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="单选分值:" label-width="80px">
                        <el-input-number v-model="paper.scoreDx" controls-position="right" size="mini" :min="1" :max="10" @change="change" style="width: 80px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="多选分值:" label-width="80px">
                        <el-input-number v-model="paper.scoreDxs" controls-position="right" size="mini" :min="1" :max="10" @change="change" style="width: 80px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="判断分值:" label-width="80px">
                        <el-input-number v-model="paper.scorePd" controls-position="right" size="mini" :min="1" :max="10" @change="change" style="width: 80px"></el-input-number>
                    </el-form-item>
                </el-form>
                <el-card id="test" style="flex: auto;padding-block: 5px; font-size: .7em;margin-bottom: 10px">
                    <div style="overflow: auto">
                        <div class="flex" style="padding-inline: 10px">
                            <h3>Java基础测试题</h3>
                        </div>
                        <el-card>
                            <div slot="header">
                                填空题（每空{{paper.scoreTk}}分）
                            </div>
                            <ol>
                                <li v-for="q in selectedQuestion.filter(a=>a.type=='填空题')">
                                    {{q.content}}
                                </li>
                            </ol>
                        </el-card>
                        <el-card>
                            <div slot="header">
                                单选题（每题{{paper.scoreDx}}分）
                            </div>
                            <ol>
                                <li v-for="q in selectedQuestion.filter(a=>a.type=='单选题')">{{q.content}}
                                    <ol type="A">
                                        <li v-for="a in q.items.split(';')">
                                            <input type="radio" :name="q.id" checked>{{a}}}
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </el-card>
                        <el-card>
                            <div slot="header">
                                多选题（每题{{paper.scoreDxs}}分）
                            </div>
                            <ol>
                                <li v-for="q in selectedQuestion.filter(a=>a.type=='多选题')">{{q.content}}
                                    <ol type="A">
                                        <li v-for="a in q.items.split(';')">
                                            <input type="checkbox" :name="q.id" checked>{{a}}}
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </el-card>
                        <el-card>

                            <div slot="header">
                                判断题（每题{{paper.scorePd}}分）
                            </div>
                            <ol>
                                <li v-for="q in selectedQuestion.filter(a=>a.type=='判断题')">
                                    {{q.content}}
                                    <div>
                                        <input type="radio" name="c">对
                                        <input type="radio" name="c">错
                                    </div>
                                </li>
                            </ol>
                        </el-card>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>

    <el-dialog title="题目信息" :visible.sync="showEditor2">
        <el-form>
            <el-form-item label="科目:" label-width="100px">
                <el-select v-model="auto.course" placeholder="科目" style="width: 100%">
                    <el-option label="Java" value="Java"></el-option>
                    <el-option label="HTML" value="html"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="填空题个数:" label-width="100px">
                <el-input-number v-model="auto.completion" controls-position="right" size="mini" :min="1" :max="10" style="width: 80px"></el-input-number>
            </el-form-item>
            <el-form-item label="单选题个数:" label-width="100px">
                <el-input-number v-model="auto.single" controls-position="right" size="mini" :min="1" :max="10"  style="width: 80px"></el-input-number>
            </el-form-item>
            <el-form-item label="多选题个数:" label-width="100px">
                <el-input-number v-model="auto.multiple" controls-position="right" size="mini" :min="1" :max="10" style="width: 80px"></el-input-number>
            </el-form-item>
            <el-form-item label="判断题个数:" label-width="100px">
                <el-input-number v-model="auto.judge" controls-position="right" size="mini" :min="1" :max="10" style="width: 80px"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEditor2 = false">取 消</el-button>
            <el-button type="primary" @click="Auto()">确 定</el-button>

        </div>
    </el-dialog>

</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            showEditor:false,
            showEditor2:false,
            questionWhere: {type:"", course:""},
            questionPage: {current:1, size:10, records:[]},
            selected: [],
            selectedQuestion: [],
            paper:{title:"",pwd:"",scoreTotal:0,time:0,begin:'',end:'',scoreTk:'',scoreDx:'',scoreDxs:'',scorePd:''},
            auto:{course:"",completion:0,single:0,multiple:0,judge:0}
        },
        created(){
            this.query();
        },
        methods:{
            query(){
                axios.get("question/query",{
                    params:{
                        page: this.questionPage.current,
                        size: this.questionPage.size,
                        type: this.questionWhere.type,
                        course: this.questionWhere.course,
                    }
                }).then(res=>{
                    if(this.questionPage.current == 1){
                        this.questionPage = res.data;
                    } else {
                        let oldRecords = this.questionPage.records;
                        this.questionPage = res.data;
                        oldRecords = oldRecords.concat(this.questionPage.records);
                        this.questionPage.records = oldRecords;
                    }
                })
            },
            queryNext(){
                if(this.questionPage.pages && this.questionPage.current < this.questionPage.pages){
                    this.questionPage.current ++;
                    this.query();
                }
            },
            choose(event,question){
                if (event.target.checked){
                    this.selectedQuestion.push(question);
                }else {
                    this.selectedQuestion = this.selectedQuestion.filter(q=>q.id!=question.id);
                }

                console.info(this.selected);
            },
            reQuery(){
                this.questionPage.current = 1;
                this.questionPage.records = [];
                this.query();
            },
            save(){
                this.paper.details = this.selectedQuestion.map(q=>{
                    return{qid:q.id}
                });
                axios.post(
                    "paper/add",
                    this.paper
                ).then(resp=>{
                    if (resp.data.code == 1){
                        this.$message(resp.data.message);
                    }else {
                        this.$alert(resp.data.message);
                    }
                });
            },
            change(){
                let score = 0;
                this.selectedQuestion.forEach(q=>{
                    if(q.type=='判断题'){
                        score+= this.paper.scorePd;
                    } else if(q.type=='多选题'){
                        score+= this.paper.scoreDxs;
                    } else if(q.type=='单选题'){
                        score+= this.paper.scoreDx;
                    } else {
                        score += q.content.split(/[^_]+/)
                            .filter(s=>/^\s*$/.test(s)==false)
                            .length * this.paper.scoreTk;
                    }
                });
                this.paper.scoreTotal = score;
            },
            Auto(){
                axios.post("paper/auto",this.auto).then(resp=>{
                    this.selectedQuestion = resp.data.data;
                    this.showEditor2 =false;
                    console.log(resp);
                });
            }
        },
        watch:{
            selectedQuestion(){
                this.change();
            }
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    #app>.el-container{
        overflow: hidden;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
        background-size: cover;
    }
    .el-main{
        padding: 0px 10px;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
        line-height: 2rem;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
    .el-form-item{
        margin-block: 10px 0px;
        padding-inline: 10px;
    }
    .el-switch{
        align-self: center
    }
    #qs .el-card__body{
        padding: 10px;
        font-size: .8em;
    }
    #test .el-card__body{
        padding: 0px;
        height: 100%;
        overflow-y: auto;
    }
    .el-col h3{
        margin: 10px;
    }
</style>

</html>